<template>
  <!-- 分析
    1.做用户搜索模块
      a.input框实现双向绑定 v-molde='songName' 键盘事件@keyup.enter='search'
      b.search搜索事件  安装axios  导入   使用 
    2.把左侧歌曲列表抽取成一个子组件songList 
      a.创建一个子组件,名字songList ,把相应的html给弄过去. 
      b.在App.vue中导入这个子组件. 
        引入 注册 使用
      c.把在App.vue里获取到的歌曲列表数据 传给 这个子组件songList
      d.那在songList子组件里就可以渲染歌曲列表. 
      e.overflow:auto   
    3.点击左侧歌曲列表中的某个歌曲来播放
      a.在左侧歌曲列表中的li标签加一个事件 @click='liClick(item.id)'
      b.在liClick 这个事件里, 其实调用的是父亲的方法getSongInfo(item.id)
      c.在父组件的getSongInfo(item.id) 发送ajax请求,获取当前这个id的歌曲的播放url 
      d.把这个url就绑定到audio标签上. 
    4.评论列表
      a.把右侧的评论列表搞成一个子组件
        名字叫comments 对应的结构复制过去.  
      b.在App.vue导入使用comments这个子组件
      c.把在父组件发送ajax请求获取到的歌曲的评论数据, 传递到comments这个子组件
      d.那在这个comments子组件里就可以把评论列表给渲染出来.
    5.中间动画
      a.把中间部分抽离出来一个子组件. 
        组件的名字叫middle, 有图片就改一下路径. 
        App.vue这个父组件要引入注册使用
    6.控制是否有动画效果,实际上就是是否有playing类. 
        那就可以弄一个变量playing来控制是否拥有这个playing类. 那就可以控制动画了
      a.audio音频播放标签有一个play()和pause()事件. 
        在这个play()事件里就可以控制子组件的playing为true. 
        在这个pause()事件里就可以控制子组件的playing为false. 
    -->
  <div class="wrap">
    <div class="play_wrap" id="player">
      <!-- 头部搜索模块 -->
      <div class="search_bar">
        <img src="./assets/images/player_title.png" alt="" />
        <input type="text" @keyup.enter="search" v-model="songName" />
      </div>
      <div class="center_con">
        <!-- 歌曲列表模块 -->
        <songList ref="songList"></songList>
        <!-- 歌曲唱片模块 -->
        <middle ref="middle"></middle>
        <!-- 歌曲评论模块 -->
        <comments ref="comments"></comments>
      </div>
      <!-- 控制播放模块 -->
      <div class="audio_con">
        <audio @play="playEvent" @pause="pauseEvent" :src="songUrl" controls autoplay loop class="myaudio"></audio>
      </div>
    </div>
  </div>
</template>

<script>
//导入1.axios/2.songList子组件/3.comments子组件/4.middle子组件
import axios from "axios";
import songList from './components/songList'
import comments from './components/comments'
import middle from './components/middle'
export default {
  data() {
    return {
      songName: "", //输入歌曲名
      songUrl:''    //歌曲url
    };
  },
  //注册组件
  components:{
      songList,  //歌曲列表子组件
      comments,  //歌曲评论
      middle     //歌曲唱片
  },
  methods: {
    //搜索歌曲事件
    search() {
      axios({
        method: "get",
        url: "http://www.dongh5.com:9000/search",
        params: {
          keywords: this.songName,
        },
      }).then((res) => {
        // console.log(res.data.result.songs);
        if(res.status==200){
            this.$refs.songList.songList=res.data.result.songs
        }
      });
    },
    getSongInfo(id){
      //此时这里拿到的id,就是当前点击的歌曲id.
      axios({
        method:'get',
        url:'http://www.dongh5.com:9000/song/url',
        params:{
          id:id 
        }
      }).then((res)=>{
        //  console.log(res);
        if(res.status==200){
          this.songUrl=res.data.data[0].url
        } 
      })

      //获取用户评论列表
      axios({
        method:'get',
        url:'http://www.dongh5.com:9000/comment/music',
        params:{
            id:id
        }
      }).then((res)=>{
        //  console.log(res);  
        if(res.status==200){
          this.$refs.comments.commentList=res.data.hotComments
        }      
      })

      //获取每首歌曲的唱片的封面、
      axios({
        method:'get',
        url:'http://www.dongh5.com:9000/song/detail',
        params:{
          ids:id
        }
      }).then((res)=>{
        console.log(res); 
        if(res.status==200){
           this.$refs.middle.songPicUrl=res.data.songs[0].al.picUrl
        }       
      })

    },
    playEvent(){
      this.$refs.middle.playing=true
    },
    pauseEvent(){
      this.$refs.middle.playing=false

    }
  },
};
</script>

  <style>
body,
ul,
dl,
dd {
  margin: 0px;
  padding: 0px;
}

.wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("./assets/images/bg.jpg") no-repeat;
  background-size: 100% 100%;
}

.play_wrap {
  width: 800px;
  height: 544px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -272px;
  /* background-color: #f9f9f9; */
}

.search_bar {
  height: 60px;
  background-color: #1eacda;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 11;
}

.search_bar img {
  margin-left: 23px;
}

.search_bar input {
  margin-right: 23px;
  width: 296px;
  height: 34px;
  border-radius: 17px;
  border: 0px;
  background: url("./assets/images/zoom.png") 265px center no-repeat
    rgba(255, 255, 255, 0.45);
  text-indent: 15px;
  outline: none;
}

.center_con {
  height: 435px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
}

.song_wrapper {
  width: 200px;
  height: 435px;
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  background: url("./assets/images/line.png") right center no-repeat;
  position: relative;
  /* overflow: hidden; */
}

.song_list li {
  font-size: 12px;
  color: #333;
  line-height: 36px;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.song_list .active {
  color: #da651e;
}

.player_con {
  width: 400px;
  height: 435px;
  position: relative;
}

.disc {
  position: absolute;
  left: 73px;
  top: 60px;
  z-index: 9;
}

.cover {
  position: absolute;
  left: 125px;
  top: 112px;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  z-index: 8;
}

.comment_list {
  width: 200px;
  height: 435px;
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  background: url("./assets/images/line.png") left center no-repeat;
  overflow: hidden;
  position: relative;
}

.comment_list dl {
  padding-left: 55px;
  position: relative;
  margin-bottom: 20px;
}

.comment_list dt {
  position: absolute;
  left: 4px;
  top: 0px;
}

.comment_list dt img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.comment_list dd {
  font-size: 12px;
}

.comment_list .name {
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

.comment_list .detail {
  color: #666;
  margin-top: 5px;
  line-height: 18px;
}

.audio_con {
  height: 50px;
  background-color: #f1f3f4;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.myaudio {
  width: 800px;
  height: 40px;
  margin-top: 5px;
  outline: none;
  background-color: #f1f3f4;
}

/* 旋转的动画 */
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }

  to {
    transform: rotateZ(360deg);
  }
}

/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}

/* 是否正在播放 */
.playing {
  animation-play-state: running;
}

.play_bar {
  position: absolute;
  left: 200px;
  top: -10px;
  z-index: 10;
  transform: rotate(-25deg);
  transform-origin: 12px 12px;
  transition: 1s;
}

/* 播放杆 转回去 */
.play_bar.playing {
  transform: rotate(0);
}
</style>